<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				slot="page-search"
				ref="form"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
				label-suffix=":"
			>
				<el-form-item
					label="手牌ID"
					prop="handCode"
					label-width="61px"
					class="flex-row-container"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						clearable
						v-model="queryData.handCode"
						:placeholder="$t('common.please_enter')"
						style="width: 180px"
					/>
				</el-form-item>

				<el-form-item
					label="牌桌ID"
					prop="tableCode"
					label-width="61px"
					class="flex-row-container"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						clearable
						v-model="queryData.tableCode"
						:placeholder="$t('common.please_enter')"
						style="width: 180px"
					/>
				</el-form-item>

				<el-form-item
					:label="$t('dxn.card_ables_list.game_name')"
					prop="tableTypeList"
					label-width="77px"
					class="flex-row-container"
				>
					<el-select
						v-model="queryData.tableTypeList"
						clearable
						:placeholder="$t('common.select_all')"
						multiple
						style="width:220px"
					>
						<el-option
							v-for="item in gameType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item
					label="保险类型"
					label-width="77px"
					prop="insuranceModeList"
					class="flex-row-container"
				>
					<el-select
						v-model="queryData.insuranceModeList"
						clearable
						:placeholder="$t('common.select_all')"
						multiple
						style="width:220px"
					>
						<el-option
							v-for="item in insuranceModeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item
					label="牌桌所属俱乐部ID"
					prop="clubId"
					label-width="135px"
					class="flex-row-container"
				>
					<el-input
						v-input="{ name: 'num' }"
						clearable
						v-model="queryData.clubId"
						:placeholder="$t('common.please_enter')"
						style="width: 180px"
					/>
				</el-form-item>

				<el-form-item
					label="保险注单号"
					prop="insuranceId"
					label-width="91px"
					class="flex-row-container"
				>
					<el-input
						v-input="{ name: 'num' }"
						clearable
						v-model="queryData.insuranceId"
						:placeholder="$t('common.please_enter')"
						style="width: 180px"
					/>
				</el-form-item>

				<el-form-item
					label="购买类型"
					prop="buyTypeList"
					label-width="77px"
					class="flex-row-container"
				>
					<el-select
						v-model="queryData.buyTypeList"
						clearable
						:placeholder="$t('common.select_all')"
						multiple
						style="width:220px"
					>
						<el-option
							v-for="item in constant.buyType"
							:key="item.description"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item
					label="购保时间"
					label-width="77px"
					class="flex-row-container"
				>
					<el-date-picker
						v-model="createTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						value-format="timestamp"
						style="width: 430px"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.member_number')}`"
					label-width="77px"
					class="flex-row-container"
				>
					<el-input
						v-model="queryData.userName"
						size="medium"
						clearable
						autocomplete="off"
						v-symbols
						:placeholder="$t('common.please_enter')"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						style="width:180px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.top_agent')}`"
					label-width="77px"
					class="flex-row-container"
				>
					<el-input
						v-model="queryData.parentProxyName"
						size="medium"
						clearable
						autocomplete="off"
						v-symbols
						:placeholder="$t('common.please_enter')"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						style="width:180px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.fund_audit.top_proxy_name')}`"
					label-width="77px"
					class="flex-row-container"
				>
					<el-input
						v-model="queryData.topProxyName"
						:placeholder="$t('common.please_enter')"
						clearable
						autocomplete="off"
						v-symbols
						style="width: 180px"
						size="medium"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`Allin人数`"
					label-width="77px"
					class="flex-row-container"
				>
					<el-select
						v-model="queryData.allinNumberList"
						clearable
						multiple
						:placeholder="
							`${$t(
								'dxn.card_ables_list.table_state_placeholder'
							)}`
						"
						style="width:220px"
					>
						<el-option
							v-for="item in allinNumberArr"
							:key="item"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90150029')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:disabled="exportloading"
						:loading="exportloading"
						@click="handleExport"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870093')"
						type="success"
						icon="el-icon-sort"
						size="medium"
						@click="showColumnSet"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="refTable"
				@current-change="handleSelectRowHighlight"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				highlight-current-row
				:header-cell-style="getRowClass"
				@sort-change="handleTableSort"
				show-summary
				:summary-method="(val) => handleRow(val, subSummary)"
			>
				<el-table-column
					type="index"
					label="序号"
					width="120"
					align="center"
				/>
				<el-table-column
					label="手牌ID"
					min-width="190"
					align="center"
					prop="handCode"
				>
					<template slot-scope="scope">
						<div
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/gameManager/gameList/gameBase',
									query: {
										handId: scope.row.handCode
									}
								})
							"
						>
							{{ scope.row.handCode }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.roundNo]"
					prop="roundNo"
					label="手牌号"
					min-width="70"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.roundNo || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.userName]"
					prop="userName"
					label="会员账号"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.userClubId]"
					label="会员所属俱乐部ID"
					min-width="125"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.userClubId"
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.userClubId
									}
								})
							"
						>
							{{ scope.row.userClubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.parentProxyName]"
					prop="parentProxyName"
					align="center"
					label="上级代理"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.parentProxyName || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.topProxyName]"
					prop="topProxyName"
					align="center"
					label="总代账号"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.topProxyName || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableCode]"
					label="牌桌ID"
					min-width="190"
					align="center"
					prop="tableCode"
				>
					<template slot-scope="scope">
						<div
							class="text-link"
							@click="
								$router.push({
									path:
										'/dxn/gameManager/cardTablesList/cardTablesBase',
									query: {
										tableId: scope.row.tableCode
									}
								})
							"
						>
							{{ scope.row.tableCode }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableName]"
					label="牌桌名称"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.tableName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.tableType]"
					prop="tableType"
					label="游戏名称"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.tableType, 'gameType') }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.clubId]"
					prop="clubId"
					label="牌桌所属俱乐部ID"
					min-width="125"
					align="center"
				>
					<template slot-scope="scope">
						<div
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.clubId
									}
								})
							"
						>
							{{ scope.row.clubId }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.orderId]"
					prop="orderId"
					label="俱乐部游戏注单号"
					min-width="180"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.orderId || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.insuredOrderId]"
					prop="insuredOrderId"
					label="保险注单号"
					min-width="180"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{
								scope.row.buyType === 0
									? '-'
									: scope.row.insuredOrderId || '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.roundCode]"
					prop="roundCode"
					label="轮次"
					min-width="70"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							getTypeName(scope.row.roundCode, constant.roundCode)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.buyType]"
					prop="buyType"
					label="购买类型"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ getTypeName(scope.row.buyType, constant.buyType) }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.createTime]"
					prop="createTime"
					label="购保时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ parseTime(scope.row.createTime) || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.insuranceMode]"
					label="保险类型"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							getTypeName(
								scope.row.insuranceMode,
								insuranceModeArr
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.outsType]"
					label="Outs类型"
					min-width="110"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.insuranceMode === 2
								? '-'
								: getOutsTypeName(scope.row.outsType)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.allinNumber]"
					label="手牌Allin人数"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.allinNumber }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.outsCount]"
					label="Outs数量"
					min-width="110"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.insuranceMode === 2
								? '-'
								: scope.row.outsCount
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.potNo]"
					label="底池号"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.potNo !== undefined
								? scope.row.potNo === '0'
									? '主池'
									: '边池' + scope.row.potNo
								: '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.potAmount]"
					prop="potAmount"
					sortable="custom"
					label="底池"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.potAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.betAmount]"
					prop="betAmount"
					sortable="custom"
					label="本底池游戏投注额"
					min-width="155"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.betAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.insuredAmount]"
					prop="insuredAmount"
					sortable="custom"
					label="保险投注额"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="
								scope.row.insuranceMode === 2 &&
									!scope.row.insuredRewards
							"
						>
							-
						</span>
						<span v-else>
							{{
								scope.row.buyType === 0
									? '-'
									: handleNumber(
											scope.row.currency,
											scope.row.insuredAmount
									  ) || '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.insuredNetAmount]"
					prop="insuredNetAmount"
					sortable="custom"
					label="保险输赢"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="
								scope.row.insuranceMode === 2 &&
									!scope.row.insuredRewards
							"
						>
							-
						</span>
						<span
							v-else
							:style="
								handleNumberColor(scope.row.insuredNetAmount)
							"
						>
							{{
								scope.row.buyType === 0
									? '-'
									: handleNumber(
											scope.row.currency,
											scope.row.insuredNetAmount
									  ) || '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.insuredRewards]"
					:key="columnSetKey"
					prop="insuredRewards"
					sortable="custom"
					min-width="150"
					align="center"
					show-overflow-tooltip
					class-name="insuredRewardsColumn"
				>
					<template #header>
						<span class="insuredRewardsHeader">
							保险赔付额
							<br />
							提取EV值
						</span>
					</template>
					<template slot-scope="scope">
						<span
							v-if="
								scope.row.buyType === 0 ||
									Number(scope.row.insuredRewards) === 0
							"
						>
							-
						</span>
						<span v-else>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.insuredRewards
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.handCards]"
					prop="handCards"
					label="会员手牌"
					min-width="120"
					align="center"
				>
					<template slot-scope="scope">
						<template
							v-if="
								!scope.row.handCards ||
									scope.row.handCards === '[]'
							"
						>
							-
						</template>
						<template v-else>
							<span
								v-for="(item, index) in getCardsImage(
									scope.row.handCards
								)"
								:key="index"
							>
								<el-image
									class="hand-card-img"
									:class="{ 'hand-card-space': index === 3 }"
									:src="item"
									fit="contain"
								></el-image>
							</span>
						</template>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.publicCards]"
					prop="publicCards"
					label="公牌信息"
					min-width="200"
					align="center"
					flex="1"
				>
					<template slot-scope="scope">
						<div class="showCardImgDiv">
							<template
								v-if="
									!scope.row.publicCards ||
										scope.row.publicCards === '[]'
								"
							>
								-
							</template>
							<template v-else>
								<div
									v-for="(item, index) in getCardsImage(
										scope.row.publicCards
									)"
									:key="index + 100"
									class="cardImgContent"
								>
									<el-image
										class="hand-card-img"
										:src="item"
										fit="contain"
									></el-image>
								</div>
								<div
									v-for="(item,
									index) in getNextPublicCardsImage(
										scope.row.publicCardList
									)"
									:key="index + 200"
									class="cardImgContent"
								>
									<div class="cardCoverStyle"></div>
									<el-image
										class="hand-card-img"
										:src="item"
										fit="contain"
									></el-image>
								</div>
							</template>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="操作"
					width="180"
					fixed="right"
				>
					<template slot-scope="scope">
						<span
							class="text-link"
							@click="getInsureBuyDetail(scope.row.id)"
						>
							购买详情
						</span>
						<span
							class="text-link ml15"
							@click="handleGameReplay(scope.row)"
						>
							牌局回顾
						</span>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</template>
		<InsureBuyDetail
			:visible.sync="insureBuyDetail.visible"
			:loading="insureBuyDetail.loading"
			:detail="insureBuyDetail.detail"
		></InsureBuyDetail>
		<TableColumnSet
			v-if="colSettings.visible"
			:visible.sync="colSettings.visible"
			:dialogColumnData="dialogColumnData"
			:activityListField="activityListField"
			@submitColumnSet="submitColumnSet"
			@choiceColumnSet="choiceColumnSet"
		></TableColumnSet>
		<GameReplay
			:dialogVisible.sync="gameReplay.visible"
			:dialogLoading="gameReplay.loading"
			:replayDetail="gameReplay.replayDetail"
			:replayList="gameReplay.replayList"
			:replayReqResult="gameReplay.replayReqResult"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import {
	getCardsImg,
	getCardsImgArr,
	getGameReplayDetail
} from '@/utils/replay'
import InsureBuyDetail from '../components/InsureBuyDetail'
import { Decimal } from 'decimal.js'
import dayjs from 'dayjs'
import summaryList from './components/summaryList'
import MainContent from '@/components/MainContent/index.vue'
import { getOutsTypeName } from '@/dict/dxn'
import tableScroll from '@/utils/tableScroll'
import { tableColumns } from './components/tableColumn'
import TableColumnSet from '@/components/Dxn/TableColumnSet'
import dxnMixin from '@/mixins/dxnMixin'
import GameReplay from '@/components/GameReplay'

const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')

export default {
	name: routerNames.insureList,
	components: {
		TableColumnSet,
		InsureBuyDetail,
		MainContent,
		GameReplay
	},
	mixins: [list, summaryList, tableScroll, dxnMixin],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			loading: false,
			exportloading: false,
			total: 0,
			dataList: [],
			subSummary: [],
			createTime: [start(), end()],
			queryData: {
				handCode: undefined,
				tableCode: undefined,
				tableTypeList: [],
				clubId: undefined,
				insuranceId: undefined,
				buyTypeList: [],
				insuranceModeList: [],
				userName: undefined,
				parentProxyName: undefined,
				topProxyName: undefined,
				allinNumberList: []
			},
			insureBuyDetail: {
				visible: false,
				loading: false,
				detail: {}
			},
			constant: {
				buyType: [
					{ code: 2, description: '强制购买' },
					{ code: 0, description: '放弃购买' },
					{ code: 1, description: '主动购买' }
				],
				roundCode: [
					{ code: 0, description: '未开始' },
					{ code: 1, description: 'Preflop轮' },
					{ code: 2, description: 'Flop轮' },
					{ code: 3, description: 'Turn轮' },
					{ code: 4, description: 'River轮' },
					{ code: 5, description: 'ShowDown轮' }
				]
			},
			insuranceModeArr: [
				{ code: 1, description: '经典保险' },
				{ code: 2, description: 'EV保险' }
			],
			allinNumberArr: [2, 3, 4, 5, 6, 7, 8, 9],
			handStatus: 1, // 保险列表里的手牌都为已结束
			replayQuery: {
				roundNo: 0, // 手牌num
				tableId: 0 // 牌桌Id
			},
			gameReplay: {
				visible: false, // 回放弹窗可见
				loading: false, // 回放加载
				replayDetail: {}, // 回放详情
				replayList: [], // 回放列表
				replayReqResult: '' // 回放接口数据请求结果
			},
			tableColumns
		}
	},
	computed: {
		gameType() {
			return this.globalDics.gameType || []
		}
	},
	watch: {
		$route: function(to, from) {
			if (to.path.indexOf(routerNames.insureList) > -1) {
				this.getRouteQuery(true)
			}
		}
	},
	created() {
		this.initIndexDB('insureList', this.activityListField)
		this.getRouteQuery()
	},
	methods: {
		getOutsTypeName,
		// 请求
		getRouteQuery(isLoadData = false) {
			if (this.$route.query.handId || this.$route.query.tableId) {
				this.resetQueryData()
				this.createTime = []
				this.queryData.handCode = this.$route.query.handId || ''
				this.queryData.tableCode = this.$route.query.tableId || ''
				if (isLoadData) {
					this.loadData()
				}
			}
		},
		// 跳转到牌局回放
		handleGameReplay(row) {
			this.replayQuery = {
				tableId: row.tableId,
				roundNo: row.roundNo
			}
			this.gameReplay = {
				visible: true,
				loading: true,
				replayDetail: {
					info: {
						handId: ''
					},
					handStatus: undefined
				},
				replayList: [],
				replayReqResult: ''
			}
			getGameReplayDetail(this)
				.then((ret) => {
					this.gameReplay.replayDetail = ret.replayDetail
					this.gameReplay.replayList = ret.replayList
				})
				.catch((ret) => {
					this.gameReplay.replayReqResult = ret.message
				})
				.finally(() => {
					this.gameReplay.replayDetail.info.handId = row.handCode
					this.gameReplay.replayDetail.handStatus =
						row.handStatus || 1
					this.gameReplay.loading = false
				})
		},
		getSearchParams() {
			const createTime = this.createTime || []
			const params = {
				...this.queryData,
				createStartTime: createTime[0]
					? dayjs(createTime[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				createEndTime: createTime[1]
					? dayjs(createTime[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}

			if (!params.buyTypeList?.length) {
				params.buyTypeList = undefined
			}
			if (!params.insuranceModeList?.length) {
				params.insuranceModeList = undefined
			}
			if (!params.tableTypeList?.length) {
				params.tableTypeList = undefined
			}
			if (!params.allinNumberList?.length) {
				params.allinNumberList = undefined
			}

			return params
		},
		// 保险列表
		loadData() {
			this.loading = true
			const params = this.getParams(this.getSearchParams())
			this.dataList = []
			this.$api
				.getInsuranceInfoListBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res.data.record
						this.total = res.data.totalRecord
						this.subSummary = res.data.summary || []
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.clearTableSort()
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.resetQueryData()
			this.pageNum = 1
			this.createTime = [start(), end()]
			this.loadData()
		},
		// 列表导出
		handleExport() {
			const params = this.getParams(this.getSearchParams())
			this.deleteExportParams(params)
			this.exportloading = true
			this.exportExcelPublic({
				api: 'getInsuranceInfoListExportBend',
				params
			}).finally(() => {
				this.exportloading = false
			})
		},
		// 购买详情
		getInsureBuyDetail(insuranceId) {
			this.insureBuyDetail = {
				visible: true,
				loading: true,
				detail: {}
			}
			const params = {
				insuranceId: insuranceId
			}
			this.$api
				.getInsuranceDetailBend(params)
				.then((res) => {
					if (res?.code === 200 && res?.data) {
						const detail = Object.assign({}, res.data)
						this.insureBuyDetail.detail = this.formateInsureBuyDetail(
							detail
						)
					}
				})
				.catch(() => {})
				.finally(() => {
					this.insureBuyDetail.loading = false
				})
		},
		// 获取游戏列表
		// getDxnGameManagerList() {
		// 	this.$api
		// 		.getDxnGameManagerListBend()
		// 		.then((res) => {
		// 			this.gameList = res?.data?.gameConfigList || []
		// 		})
		// 		.catch((e) => {
		// 			console.error(e)
		// 		})
		// },
		// 获取下一张公牌，为false则为下一张公牌
		getNextPublicCardsImage(publicCardsList) {
			if (Array.isArray(publicCardsList)) {
				const nextPublicCardsArr = publicCardsList
					.filter((item) => Object.values(item)[0] === true)
					.map((item) => parseInt(Object.keys(item)[0]))
				return getCardsImgArr(nextPublicCardsArr)
			}
			return []
		},
		getCardsImage(cardsStr) {
			let imageArr = []
			const cardsNumReplaceStr = cardsStr.replace(/[\[\]]/g, '')
			if (cardsNumReplaceStr) {
				imageArr = getCardsImgArr(cardsNumReplaceStr.split(','))
			}
			return imageArr
		},
		formateInsureBuyDetail(detail) {
			// detail.maxInsuredAmount 最大投保额
			// detail.potAmount 底池
			// detail.betAmount 玩家投注额
			detail.handCardsImg = []
			detail.publicCardsImg = []
			detail.nextPublicCardsImg = []
			// 手牌
			detail.handCards = detail?.handCards.replace(/[\[\]]/g, '')
			if (detail.handCards) {
				detail.handCardsImg = getCardsImgArr(
					detail.handCards.split(',')
				)
			}
			// 公牌
			detail.publicCards = detail?.publicCards.replace(/[\[\]]/g, '')
			if (detail.publicCards) {
				detail.publicCardsImg = getCardsImgArr(
					detail.publicCards.split(',')
				)
			}
			// 下一张公牌
			if (Array.isArray(detail.publicCardList)) {
				detail.nextPublicCardsImg = this.getNextPublicCardsImage(
					detail.publicCardList
				)
			}
			// insuranceMode保险模式 0-不开保险 1-经典保险 2-EV保险
			detail.isEVInsurance = detail.insuranceMode == 2
			// 经典保险
			detail.odds = undefined
			detail.insuredRewards = undefined
			detail.insuredRewardsAllocation = undefined
			detail.insuredAmount = undefined
			detail.allOuts = []
			detail.allOutsImg = []
			detail.buyOuts = []
			detail.noBuyInsureUser = []
			// EV保险
			detail.potWinRate = undefined
			detail.insuranceDiscount = undefined
			detail.evExtractionVal = undefined

			if (Array.isArray(detail?.insuranceBuyDetailList)) {
				detail.insuranceBuyDetailList.forEach((item) => {
					let allOuts = [] // 所有outs
					if (item.allOuts && item.allOuts !== 'null') {
						item.allOuts = item.allOuts.replace(/[\[\]]/g, '')
						allOuts = item.allOuts ? item.allOuts.split(',') : []
					}
					let buyOuts = [] // 已买outs
					if (item.buyOuts && item.buyOuts !== 'null') {
						item.buyOuts = item.buyOuts.replace(/[\[\]]/g, '')
						buyOuts = item.buyOuts ? item.buyOuts.split(',') : []
					}

					// 是否购买保险：1,是；0否；已经买了保险
					if (item.isInsured === 1) {
						detail.insuredAmount = item.insuredAmount // 经典保险：保险投注额；
						detail.insuredRewards = item.insuredRewards // 经典保险：保险赔付额；EV保险：实际EV值

						if (detail.isEVInsurance) {
							// 计算EV保险提取值
							const potWinRate = item.potWinRate || 0
							const insuranceDiscount = Number(
								new Decimal(1)
									.sub(item.insuranceDiscount || 0)
									.toFixed(2, Decimal.ROUND_DOWN)
							) // 折扣=1-平分盈利率

							detail.evExtractionVal = Number(
								new Decimal(detail.potAmount || 0)
									.mul(potWinRate)
									.mul(insuranceDiscount)
									.div(100)
									.toFixed(2, Decimal.ROUND_DOWN)
							)
							detail.potWinRate = potWinRate + '%' // 底池胜率
							detail.insuranceDiscount = insuranceDiscount // 折扣
						} else {
							// 计算经典保险奖励分配
							detail.odds = item.odds // 赔率
							detail.insuredRewardsAllocation = Number(
								// 计算,截取小数点2位,去小数点0
								new Decimal(item.insuredAmount || 0)
									.mul(item.odds || 0)
									.toFixed(2, Decimal.ROUND_DOWN)
							)
						}
					}
					// 没有购买保险的用户手牌信息
					if (item.isInsured === 0) {
						let handCards = [] // 手牌
						if (item.handCards && item.handCards !== 'null') {
							item.handCards = item.handCards.replace(
								/[\[\]]/g,
								''
							)
							handCards = item.handCards
								? item.handCards.split(',')
								: []
						}
						if (handCards.length > 0) {
							const itemUser = {
								userName: item.userName,
								nickName: item.nickName,
								handCardsImg: getCardsImgArr(handCards)
							}
							detail.noBuyInsureUser.push(itemUser)
						}
					}
					// 将所有记录合并为一个记录里
					detail.allOuts = detail.allOuts.concat(allOuts)
					detail.buyOuts = detail.buyOuts.concat(buyOuts)
				})
			}
			if (detail.allOuts.length > 0) {
				detail.allOuts.forEach((item) => {
					const imgItem = {
						num: item,
						img: getCardsImg(item),
						isBuy: detail.buyOuts.indexOf(item) > -1
					}
					detail.allOutsImg.push(imgItem)
				})
			}
			detail.allOutsLen = detail.allOuts.length
			delete detail.insuranceBuyDetailList
			// 转换outsType类型名
			detail.outsTypeName = this.getOutsTypeName(detail.outsType)
			return detail
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.insuredRewardsHeader {
	display: inline-block;
}
::v-deep .insuredRewardsColumn .caret-wrapper {
	vertical-align: unset;
}
.hand-card-img {
	width: 27px;
	height: 36px;
}
.hand-card-space {
	margin-left: 5px;
}
.showCardImgDiv {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	.cardImgContent {
		width: 27px;
		height: 36px;
		display: inline;
		position: relative;
		.cardCoverStyle {
			z-index: 2;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: white;
			opacity: 0.6;
			border-radius: 4px;
		}
	}
}
</style>
